<html template="../templates/3-layoutTemplate.xhtml" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:c="http://java.sun.com/jsp/jstl/core">     
    <h:head>
        <title>Unanswered Questions</title>
        <link type="text/css" rel="stylesheet"	href="${request.contextPath}${request.servletPath}/css/default.css" />
        <script type="text/javascript"
          src="https://c328740.ssl.cf1.rackcdn.com/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
        </script>                                            
        <script type="text/x-mathjax-config">
          MathJax.Hub.Config({
            tex2jax: {
              inlineMath: [["$","$"],["\\(","\\)"]]
            }
          });
        </script> 

    </h:head>

    <h:body>
                    <div style="margin:0 auto;display: inline-block;border: 0px solid #AFAFAF; width: 100%">
                        <h:form id="unAnsweredQuestionsForm">
                            <p:messages id="messages" showDetail="true" autoUpdate="true" closable="true"  escape="false" />
                            <p:panel header="Following questions are unanswered" style="height: 350px;margin-bottom: 5px;" id="UnAnsweredQuestionsPanel">  

                                <div style="width:100%;">
                                    <c:forEach var="qn" items="#{questionBoardBean.questionsMarkedAsUnansweredList}">
                                        <p:commandButton process="@this" value="#{qn.rownum}" actionListener="#{questionBoardBean.getNextUnAnsweredQuestion}" ajax="true" update="UnAnsweredQuestionsPanel">
                                            <f:attribute name="rownum" value="#{qn.rownum}" />
                                        </p:commandButton>
                                    </c:forEach>
                                </div>
                                <div style="clear: both;margin: 5px;"></div>
                                <div style="min-height: 200px; float: left;padding-top: 5px;border: 0px solid #AFAFAF;width: 100%">
                                    <div style="padding-bottom: 10px;padding-top: 10px;border-bottom: 1px solid #DC8700;width: 100%">
                                        #{questionBoardBean.currentQuestion.question}
                                    </div>
                                    <div style="float:left;padding: 10px 0px 10px 0px;min-height: 130px;border: 0px solid;width: 100%">
                                        <h:panelGrid columns="2" style="margin-bottom:10px" cellpadding="5" > 
                                            <p:selectOneRadio value="#{questionBoardBean.currentQuestion.userSelectedAnswer}" layout="grid" columns="2"> 
                                                <f:selectItem itemLabel="#{questionBoardBean.currentQuestion.option1}" itemValue="a" />
                                                <f:selectItem itemLabel="#{questionBoardBean.currentQuestion.option2}" itemValue="b" />
                                                <f:selectItem itemLabel="#{questionBoardBean.currentQuestion.option3}" itemValue="c" />
                                                <f:selectItem itemLabel="#{questionBoardBean.currentQuestion.option4}" itemValue="d" />
                                                <f:selectItem itemLabel="#{questionBoardBean.currentQuestion.option5}" itemValue="e" />
                                                <p:ajax event="change" listener="#{questionBoardBean.markAnswer}" />
                                            </p:selectOneRadio>
                                        </h:panelGrid>
                                    </div>
                                </div>
                            </p:panel>
                            <div align="center">
                            <p:commandButton value="Done" styleClass="ui-confirmdialog-yes" icon="ui-icon-check" style="width:130px;height: 50px;"
                                 action="#{questionBoardBean.closeUnAnsweredQuestionDialog}" ajax="true" process="@form" />
                            </div>
                            <div style="clear: both;margin: 5px;"></div>
                            
                        </h:form>
                    </div>
    </h:body>
</html>